<template>
    <div>
        <p>count: {{ count }}</p>
        <!-- <p>{{ person.name }}</p> -->
    </div>
</template>

<script>
import { defineComponent, reactive } from "@vue/runtime-core";
import { ref } from "vue";
export default defineComponent({
    setup() {
        console.log("---ref---")
        const count = ref(0);
        console.log("count",count);
        console.log("count.value",count.value); //0
        
        count.value ++;
        console.log("更新值：",count.value); //1

        const arr = ref([]);
        arr.value.push("天下");
        console.log("arr.value",arr.value);

        // const person = ref({
        //     name: "tianxia",
        //     age: 18
        // })
        // console.log("person",person.value.name);
        // console.log("person",person.value.age);
        
        // setTimeout(()=>{
        //     person.value.name = "xiao"
        // },1000)

        return {
            count,
            //person,
        }
    }
})
</script>

<style>

</style>